<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>自定义组件的 v-model</title>
        <script src="../public/vue2.7.14-dev.js"></script>
    </head>
    <body>
        <div id="app">
            父组件的goodCount:{{ goodCount }}
            <stepper v-model="goodCount" />
        </div>


        <script>
    Vue.component("stepper", {
  template: `<div>
    <button @click="sub">-</button>
    子组件的count:{{ count }}
    <button @click="add">+</button>
    </div>
    `,
/* 在子组件中，我们更改了model的选项prop: 'count'、event: 'change-count'，如果默认不更改的话，那么model的默认值将是
    model: {
    prop: 'value', 
    event: 'input' 
  }
*/
  model: {
    prop: "count", // 定义传递给v-model的那个变量，绑定到哪个属性值上
    event: "change-count", // event:什么时候触发v-model行为
  },
  props: {
    // 需要在组件的 props 选项里声明 count 这个 prop
    count: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    sub() {
      this.$emit("change-count", this.count - 1);
    },
    add() {
      this.$emit("change-count", this.count + 1);
    },
  },
});
  
    
    let vm=new Vue({
        el:'#app',
        data(){
            return{
                goodCount:0
            }
        }
    })
    </script>
    </body>
</html>